<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 消息提示相关
const showMessage = (type) => {
  ElMessage({
    type,
    message: `这是一条${type === 'success' ? '成功' : type === 'warning' ? '警告' : type === 'info' ? '消息' : '错误'}提示`,
    duration: 3000
  })
}

// Alert组件控制
const alerts = ref([
  { title: '成功提示', description: '这是一条成功提示的文案', type: 'success', closable: true },
  { title: '警告提示', description: '这是一条警告提示的文案', type: 'warning', closable: true },
  { title: '消息提示', description: '这是一条消息提示的文案', type: 'info', closable: true },
  { title: '错误提示', description: '这是一条错误提示的文案', type: 'error', closable: true }
])

// Notification组件控制
const openNotification = (position, type) => {
  ElNotification({
    title: type === 'success' ? '成功' : type === 'warning' ? '警告' : type === 'info' ? '消息' : '错误',
    message: `这是一条${type}通知，它会自动消失`,
    position,
    type,
    duration: 3000
  })
}

// Loading组件控制
const fullscreenLoading = ref(false)
const openFullscreenLoading = () => {
  fullscreenLoading.value = true
  setTimeout(() => {
    fullscreenLoading.value = false
  }, 2000)
}
</script>

<template>
  <div class="example-container">
    <div class="page-header bg-white p-4 rounded-lg shadow-sm mb-4">
      <h1 class="text-xl font-bold text-gray-800">提示信息组件示例</h1>
      <p class="text-gray-500 mt-1">展示各种提示信息、通知和加载组件的使用方法</p>
    </div>

    <!-- Message 消息提示 -->
    <el-card class="mb-6">
      <template #header>
        <div class="flex items-center">
          <el-icon class="mr-2 text-primary"><ChatDotRound /></el-icon>
          <span class="font-medium">Message 消息提示</span>
        </div>
      </template>
      
      <div class="description mb-4 text-gray-500 text-sm">
        轻量级的消息提示，从顶部出现并自动消失
      </div>
      
      <div class="flex flex-wrap gap-3">
        <el-button @click="showMessage('success')">成功消息</el-button>
        <el-button @click="showMessage('warning')">警告消息</el-button>
        <el-button @click="showMessage('info')">普通消息</el-button>
        <el-button @click="showMessage('error')">错误消息</el-button>
      </div>
    </el-card>

    <!-- Alert 警告 -->
    <el-card class="mb-6">
      <template #header>
        <div class="flex items-center">
          <el-icon class="mr-2 text-primary"><Warning /></el-icon>
          <span class="font-medium">Alert 警告</span>
        </div>
      </template>
      
      <div class="description mb-4 text-gray-500 text-sm">
        显示重要的提示信息，可以包含标题和内容
      </div>
      
      <div class="grid gap-4">
        <el-alert
          v-for="(alert, index) in alerts"
          :key="index"
          :title="alert.title"
          :description="alert.description"
          :type="alert.type"
          :closable="alert.closable"
          show-icon
        />
      </div>
    </el-card>

    <!-- Notification 通知 -->
    <el-card class="mb-6">
      <template #header>
        <div class="flex items-center">
          <el-icon class="mr-2 text-primary"><Bell /></el-icon>
          <span class="font-medium">Notification 通知</span>
        </div>
      </template>
      
      <div class="description mb-4 text-gray-500 text-sm">
        全局展示通知提醒信息，可以设置显示位置
      </div>
      
      <div class="mb-4">
        <span class="block mb-2 text-sm font-medium">右上角通知：</span>
        <div class="flex flex-wrap gap-3">
          <el-button @click="openNotification('top-right', 'success')">成功通知</el-button>
          <el-button @click="openNotification('top-right', 'warning')">警告通知</el-button>
          <el-button @click="openNotification('top-right', 'info')">消息通知</el-button>
          <el-button @click="openNotification('top-right', 'error')">错误通知</el-button>
        </div>
      </div>

      <div>
        <span class="block mb-2 text-sm font-medium">右下角通知：</span>
        <div class="flex flex-wrap gap-3">
          <el-button @click="openNotification('bottom-right', 'success')">成功通知</el-button>
          <el-button @click="openNotification('bottom-right', 'warning')">警告通知</el-button>
          <el-button @click="openNotification('bottom-right', 'info')">消息通知</el-button>
          <el-button @click="openNotification('bottom-right', 'error')">错误通知</el-button>
        </div>
      </div>
    </el-card>

    <!-- Loading 加载 -->
    <el-card>
      <template #header>
        <div class="flex items-center">
          <el-icon class="mr-2 text-primary"><Loading /></el-icon>
          <span class="font-medium">Loading 加载</span>
        </div>
      </template>
      
      <div class="description mb-4 text-gray-500 text-sm">
        在操作过程中显示加载动画，提高用户体验
      </div>
      
      <div class="grid gap-4">
        <el-button 
          v-loading.fullscreen.lock="fullscreenLoading" 
          @click="openFullscreenLoading" 
          type="primary"
        >
          显示全屏加载动画
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.example-container {
  max-width: 1200px;
}
</style> 